<template>
    <div class="main-box staffEntry">
        <el-card class="box-card">
            <div slot="header" class="flexBetween clearfix">
                <span>员工入职台账</span>
                <div class="btn"> 
                    <el-button type="primary">新建</el-button>
                </div>
            </div>
            <div class="table">
                <el-table
                    v-loading="loading"
                    element-loading-text="加载中..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.8)"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :height="heightTable"
                    :header-cell-style="{background:'#f5f7fa',color:'#333'}"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="station"
                        label="所属岗位">
                    </el-table-column>
                    <el-table-column
                        label="到岗日期">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="sex"
                        label="员工性别">
                    </el-table-column>
                    <el-table-column
                        width="125"
                        prop="telephone"
                        label="手机号码">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="branch"
                        label="所属分部">
                    </el-table-column>
                    <el-table-column
                        prop="inductionProcess"
                        label="入职流程">
                    </el-table-column>
                    <el-table-column
                        prop="contractSigningDate"
                        label="合同签署日期">
                    </el-table-column>
                    <el-table-column
                        prop="contractSigningProcess"
                        label="合同签署流程">
                    </el-table-column>
                    <el-table-column 
                        label="操作">
                        <el-button
                            @click.native.prevent="editRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                            编辑
                        </el-button>
                        <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                            删除
                        </el-button>
                    </el-table-column>
                </el-table>
                <pagesComponent :total="totalPage" @changePage="changePage"></pagesComponent>
            </div>
        </el-card>
    </div>
</template>

<script>
import { staffData } from'@/data/staffData.js';
import { heightAuto } from '@/data/commonMethods.js';
export default {
    name: 'staffEntry',
    components: {
        pagesComponent: () => import('../../components/pagination') 
    },
    data () {
        return {
            tableData: staffData,
            multipleSelection: [],
            totalPage: 500, //总条数
            form: {
                page: 1,
                pagesize: 20
            },
            heightTable: 0, //table高度
            loading: false
        }
    },
    methods: {
        //选择信息
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val)
        },
        //接收选择的页数
        changePage(page) {
            this.form.page = page;
        },
        //编辑
        editRow(index, data) {
            console.log(index, data);
        },
        //删除
        deleteRow(index, data) {
            console.log(index, data);
        },
        //自动计算table的高度
        heightFun() {
            this.heightTable = heightAuto();
        }
    },
    mounted() {
        //监听浏览器窗口
        window.onresize = () => {
            this.heightFun()
        };
        this.$nextTick(() => {
           this.heightTable = heightAuto();
        });
    }
}
</script>

<style lang="scss" scoped>
    .staffEntry {
        .btn {
            /deep/ .el-button {
              padding: 6px;
            }
        }
    }
</style>